<template>
  <div class="registered-container totalRevenue appMainWarp">
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="交易时间:">
        <el-date-picker
          v-model="searchKey.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="院区:">
        <el-select v-model="searchKey.hospital_area_no" placeholder="请选择">
          <el-option
            v-for="item in [
              ...[{area_code: '', area_name: '全部'}],
              ...searchKey.Hospital,
            ]"
            :key="item.area_code"
            :label="item.area_name"
            :value="item.area_code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择支付场景:">
        <el-select v-model="searchKey.system_no" multiple placeholder="请选择支付场景" clearable>
          <el-option
            v-for="item in searchKey.System"
            :key="item.pay_scene_no"
            :label="item.pay_scene_name"
            :value="item.pay_scene_no"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onLoad">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-download" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        ref="table"
        v-loading="tableLoading"
        center
        class="table"
        :data="tableData"
        stripe
        border
      >
        <el-table-column label="业务类型" align="center">
          <el-table-column label="终端/类型" align="center">
            <template slot-scope="scope">{{ scope.row.terminal_code }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-for="col in cols" :key="col.id" :label="col.bill_type_name">
          <el-table-column label="支付" :prop="col.pay" align="center" />
          <el-table-column label="退费" :prop="col.refund" align="center" />
        </el-table-column>
        <el-table-column label="合计" align="center">
          <el-table-column label="支付" align="center">
            <template slot-scope="scope">{{ scope.row.pay_fee_sum || 0 }}</template>
          </el-table-column>
          <el-table-column label="退费" align="center">
            <template slot-scope="scope">{{ scope.row.refund_fee_sum || 0 }}</template>
          </el-table-column>
          <el-table-column label="净收" align="center">
            <template slot-scope="scope">{{ scope.row.income || 0 }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { terminalaccount, treeList, getConfigType } from '@/api/transactRecords/index'
import { getUserName } from '@/utils/auth'
export default {
  name: 'TerminalReport',
  data() {
    return {
      tableLoading: false,
      searchKey: {
        time: '', // 交易日期
        bustype: '2',
        hospital_area_no: '', // 选择院区
        Hospital: [],
        system_no: '', // 平台
        System: [],
        reconciliation: '', // 对账业务
        bustypeList: []
      },
      minDate: '',
      maxDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        },
        disabledDate: (time) => { // 查询时间跨度为365天
          if (this.minDate) {
            var range = 365 * 24 * 3600 * 1000
            return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
          }
          return time.getTime() > Date.now()
        }
      },
      cols: [
        // { pay: 'pay_fee_100', refund: 'refund_fee_100', label: '住院' },
        // { pay: 'pay_fee_200', refund: 'refund_fee_200', label: '门诊' }
      ],
      tableData: [
        // {
        //   terminal_code: 'Z001',
        //   pay_fee_100: 1112730.62,
        //   refund_fee_100: 35039.56,
        //   bill_type_name_100: '住院',
        //   pay_fee_200: '',
        //   refund_fee_200: 4364.93,
        //   bill_type_name_200: '门诊'
        // },
        // {
        //   terminal_code: 'Z002',
        //   pay_fee_100: 230711.33,
        //   refund_fee_100: 6414.10,
        //   bill_type_name_100: '住院',
        //   pay_fee_200: '',
        //   refund_fee_200: 599.14,
        //   bill_type_name_200: '门诊'
        // }
      ]
    }
  },
  watch: {
    'searchKey.time': {
      deep: true,
      handler(val) {
        if (val == null) {
          this.minDate = null
        }
      }
    }
  },
  created() {
    this.getConfig()
    this.searchKey.time = this.utils.Foryest()
  },
  mounted() {
    this.onLoad()
    this.getAreanoList()
  },
  methods: {
    // 系统配置搜索
    getConfig() {
      var that = this
      var params = {}
      getConfigType(params)
        .then((res) => {
          that.searchKey.System = res.data.scene
        })
        .catch(() => {})
    },
    getAreanoList() {
      treeList({ username: getUserName() })
        .then(res => {
          this.searchKey.Hospital = res.data.area
        })
        .catch(() => {})
    },
    // 系统配置搜索
    onLoad() {
      var that = this
      var params = {}
      params.payscene = that.searchKey.system_no.toString()
      params.areano = that.searchKey.hospital_area_no
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.starttime = that.searchKey.time[0]
        params.endtime = that.searchKey.time[1]
      } else {
        params.starttime = ''
        params.endtime = ''
      }
      that.tableLoading = true
      terminalaccount(params)
        .then(res => {
          that.tableLoading = false
          this.cols = res.data.bill_type
          this.tableData = res.data.result
        })
        .catch(() => {
          that.tableLoading = false
        })
    },
    // 导出
    onExport() {
      var params = {}
      var that = this
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.starttime = that.searchKey.time[0]
        params.endtime = that.searchKey.time[1]
      } else {
        params.starttime = ''
        params.endtime = ''
      }
      params.areano = that.searchKey.hospital_area_no
      params.payscene = that.searchKey.system_no.toString()
      var viewUrl = `/cms/terminalaccount?&areano=${
        params.areano
      }&starttime=${
        params.starttime
      }&endtime=${params.endtime}&export=${1}`
      window.location.href = process.env.VUE_APP_BASE_API + viewUrl
    }
  }
}
</script>
